<template>
  <section>
    <div class="cont_box">
      <div class="cont_box_left">
        <el-form :inline="true" :model="formSearch" class="margin10">
          <!-- <el-form-item label="">
            <el-input v-model="formSearch.name" placeholder="搜索部门名称"></el-input>
          </el-form-item> -->
          <el-form-item label="">
            <el-button  @click="getInit">查询</el-button>
          </el-form-item>
          <!-- v-if="$root.btnControl.find(item=>item=='add')" -->
          <el-form-item label="">
            <el-button type="primary" @click="showAdd">添加</el-button>
          </el-form-item>
          <el-form-item label="">
            <el-button type="warning"@click="showupdata">修改
            </el-button>
          </el-form-item>
          <el-form-item label="">
            <el-button type="info" @click="reSet">重置</el-button>
          </el-form-item>
        </el-form>
        <el-tree :data="dataTree" default-expand-all node-key="id" @node-click="treeClick" :props="defaultProps"
          :filter-node-method="filterNode" :expand-on-click-node="false" ref="tree" style="position:relative;margin:10px 0;font-size:14px;">
          <span slot-scope="{ node, data }">
            <i class="el-icon-office-building" v-if="data.type==1"></i>
            <i class="el-icon-school" v-if="data.type==2"></i>
            <!-- <i class="el-icon-user-solid" v-if="data.type==1"></i>
            <i class="el-icon-user" v-if="data.type==2"></i> -->
            <span>{{ node.label }}</span>
            <!-- <el-button style="position:absolute;right:0px;margin-bottom:5px;"
              type="danger" size="mini" @click="() => deleInfor(data)"> 删除 </el-button> -->
            <!-- !data.parentId&&data.parentId!=0&&$root.btnControl.find(item=>item=='delete') -->
            <span class="del_btn" @click="() => deleInfor(data)">
              删除
            </span>
          </span>
        </el-tree>
      </div>
      <div class="cont_box_right">
        <el-form :inline="true" :model="formSearch" class="marginRight">
          <el-form-item :label="changeHandle == 1?'新增':'修改'" style="margin:0px;">
          </el-form-item>
        </el-form>
        <el-form label-position="right" :rules="rules" label-width="80px" :model="formPush" ref='formPush'>

          <el-form-item label="上级" prop="parentName">
            <el-input v-model="formPush.parentName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model.trim="formPush.name"></el-input>
          </el-form-item>

          <el-form-item>
            <!-- &&$root.btnControl.find(item=>item=='add') -->
            <el-button size="medium "
              @click="addTree('formPush')">新增</el-button>
            <el-button v-if="changeHandle == 0 && type == 3" size="medium " type="warning" @click="upTree('formPush')">
              修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </section>
</template>

<script>
  import { updDeviceClassify, addDeviceClassify, orgTree, getDeviceClassifyList, deleteDeviceClassify, roletreeList, managerrole } from '../../url/api';
  export default {
    data() {
      return {
        min: 0,
        nowName: '',//子集
        pName: '',//父级
        type: '',
        sortValue: '',//排序
        abbreviation: '',//简称
        description: '',//描述
        inputNumber: 0,
        checkStrictly: false,//控制子集和父级的关系
        changeHandle: 1,//1表示执行新增，0表示修改
        formSearch: {//查询条件
          name: '',
          status: 1
        },
        dataTree1: [],//树数据

        option1: [],
        parentType: '',//父级类型
        formPush: {
          sortValue: 0,
          // type:1,
          status: true
        },//表单提交
        defaultProps: {//树状图key定义
          children: 'children',
          label: 'name'
        },
        defaultProps2: {
          children: 'children',
          label: 'name',
          value: 'id',
          expandTrigger: 'hover',
          checkStrictly: true
        },
        parentId: '',
        menuList: [],//角色树
        showmenuList: [],//角色回显
        dataTree: [],//树数据
        filterText: '',//输入的查询内容
        rules: {
          parentName: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
          name: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
        },
        roles: [],
        delTree: []//删除树
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {

      reSet() {
        this.$refs.formPush.resetFields();
        this.formPush = {
          sortValue: 0,
          status: true
        }
        this.formSearch = {
          name: '',
          status: 1
        }
        this.option1 = []

        this.getInit()
      },
      showRole(obj) {//角色绑定
        this.checkStrictly = true
        roletreeList(obj.id).then((res) => {//权限选择列表
          //console.log(res)
          if (res.data.ok) {
            this.menuList = res.data.data
            this.showmenuList = obj.roles
            this.$nextTick(() => {
              this.$refs.rightsTree.setCheckedKeys(this.showmenuList);
              this.checkStrictly = false
            });
            this.formPush.roles = obj.roles
          }
        })
      },
      handleCheckChange(checkedNodes, obj) {//树状图选中
        //console.log(obj);
        this.formPush.roles = []
        obj.checkedNodes.forEach((item) => {
          if (!item.data) {
            this.formPush.roles.push(item.id)
          }
        })
        //console.log(this.formPush.roles);
      },
      showupdata() {//切换修改状态
        this.changeHandle = 0;
        this.inputNumber = this.formPush.sortValue || 0
        this.formPush.name = this.nowName
        this.formPush.parentName = this.pName
        this.formPush.abbreviation = this.abbreviation
        this.formPush.description = this.description
        this.formPush.type = this.type
        this.inputNumber = this.formPush.sortValue = this.sortValue
        this.formPush = {}
        console.log("xiugai",this.formPush,this.inputNumber);


      },
      showAdd() {//切换添加状态


        if (!this.formPush.parentName) {
          this.formPush.parentName = this.nowName
        }
        this.formPush.parentName = this.nowName
        this.formPush.name = ''
        this.formPush.abbreviation = ''
        this.formPush.description = ""
        this.option1 = []
        if (this.formPush.children) {
          this.formPush.sortValue = this.inputNumber = this.formPush.children.length
        } else {
          this.formPush.sortValue = this.inputNumber = 0
        }
        this.formPush = {}
        this.changeHandle = 1
        // this.formPush={sortValue:0,status:true}
      },
      getInit() {
        getDeviceClassifyList({}).then((res) => {
          //console.log(res)
          if (res.data.ok) {
            this.dataTree = res.data.data
          }
        })
        let org_tree = {
          name: '',
          status: 1
        }
        orgTree(org_tree).then((res) => {
          //console.log(res)
          if (res.data.ok) {
            this.dataTree1 = res.data.data
          }
        })
      },
      filterNode(value, data) {//树状图节点搜索
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      treeClick(data, nodes) {//树状图node节点点击事件,将该节点的数据填充，修改
        console.log(data,nodes);
        this.type = data.type
        if (data.type == 1) {
          return
        }
        if (this.changeHandle == 0 && data.type == 2) {
          this.formPush = {
            sortValue: 0,
            status: true
          }
          return
        }
        this.parentId = data.parentId
        // if (!data.parentName) {
        //    // this.formPush.parentName = this.formPush.name
        //     //this.$message("该功能不可修改区域！")
        //     return
        // }

        this.formPush = JSON.parse(JSON.stringify(data))
        this.parentType = nodes.parent.data.type
        this.nowName = this.formPush.name
        this.pName = this.formPush.parentName
        this.sortValue = this.formPush.sortValue
        this.abbreviation = this.formPush.abbreviation
        this.description = this.formPush.description
        //this.type = this.formPush.type

        //新增
        if (this.formPush.type == 2 && this.changeHandle == 1) {
          this.formPush.xqId = this.formPush.id
          //delete this.formPush.parentId
        } else if (this.formPush.type == 3 && this.changeHandle == 1) {
          this.formPush.parentId = this.formPush.id
          //console.log(this.formPush.parentId);
          //delete this.formPush.xqId
        }

        //修改
        if (this.formPush.type == 3 && this.changeHandle == 0) {
          console.log(this.formPush);
          delete this.formPush.xqId
        }

        //console.log("this.formPush",this.formPush);


        if (this.changeHandle == 1) {
          this.formPush.name = ''
          this.formPush.parentName = this.nowName
          this.formPush.abbreviation = ''
          this.formPush.description = ''
          if (this.formPush.children) {
            this.formPush.sortValue = this.inputNumber = this.formPush.children.length
          } else {
            this.formPush.sortValue = 0
          }
        } else {
          //console.log(this.sortValue)
          if (this.formPush.children) {
            this.inputNumber = this.sortValue
            this.formPush.parentName = this.pName
            this.formPush.abbreviation = this.abbreviation
            this.formPush.description = this.description
          } else {
            this.inputNumber = this.sortValue
            this.formPush.sortValue = this.sortValue
          }
        }

        //console.log(data)
        //console.log("this.formPush",this.formPush);
        //this.showRole(data)
      },
      addTree(formName) {//添加树状图node节点






        this.$refs[formName].validate((valid) => {
          if (valid) {
            //console.log();


            let params = {
              name: this.formPush.name,
            }
            let xqId = this.formPush.xqId;
            params.xqId = xqId
            let parentId = this.formPush.parentId;
            params.pid = parentId
            if (this.formPush.children != null) {
              params.sortValue = this.formPush.children.length
            } else {
              params.sortValue = 0
            }


            //console.log(this.formPush);
            //console.log(params);

            addDeviceClassify(params).then((res) => {
              //console.log(res)
              if (res.data.ok) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                this.getInit()

              }
            })
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
      },
      upTree(formName) {//修改树状图node节点


        let params = {
          id : this.formPush.id,
          name:this.formPush.name,
          pid:this.formPush.parentId,
          sortValue:this.formPush.sortValue,
          xqId:this.formPush.xqId
        }

        console.log(params)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm("确定要修改吗？", '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              updDeviceClassify(params).then((res) => {
                //console.log(res)
                if (res.data.ok) {
                  this.$message({
                    message: '修改成功',
                    type: 'warning'
                  });
                  this.getInit()
                }
              })
            }).catch(() => {

            });

          } else {
            //console.log('error submit!!');
            return false;
          }
        });
      },

      deleInfor(data) {
        //console.log(this.delTree);
        let params = [data.id]
        //console.log(params);
        this.$confirm("确定要删除吗？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          //console.log("hahahah");
          deleteDeviceClassify(params).then((res) => {
            //console.log("删除", res)
            if (res.data.ok) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getInit()
              this.formPush = {}
            } else {
              this.$message('删除失败')
            }
          })

        }).catch(() => {

        });


      }
    },
    mounted() {
      this.getInit()
    },
  }
</script>
<style scoped>
.del_btn{
  color: #fff;
  position: absolute;
  right: 10px;
  background: red;
  padding: 2px 10px;
  border-radius: 5px;
}
  .cont_box {
    width: 100%;
    display: flex;
  }

  .cont_box_left,
  .cont_box_right {
    flex: 1;
    background: transparent;
    padding: 10px;
  }

  .cont_box_left {
    margin-right: 10px;
  }

  .margin10 {
    margin-bottom: 10px;
  }

  .marginRight {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .cont_box_right .el-form-item {
    margin-bottom: 20px;
  }
</style>
